<template>
  <div class="dashboard-container">
    <!-- 上半部分 -->
    <el-row class="top-erea">
      <el-col :span="18" class="left-erae">
        <!-- 左侧顶部区域 -->
        <el-row class="left-top-erea">
          <!-- 工单统计 -->
          <el-col :span="13" class="work-order">
            <!-- 头部标题 -->
            <div class="header">
              <div class="title">
                工单统计
                <span class="sub-title">{{ firstDayMonth }} ~ {{ today }}</span>
              </div>
            </div>
            <!-- body -->
            <div class="body">
              <div class="stats">
                <div class="item">
                  <div class="num color1 text-shadow1">
                    {{ taskReportInfo.total }}
                  </div>
                  <div class="text color2">工单总数（个）</div>
                </div>
              </div>
              <div class="stats">
                <div class="item">
                  <div class="num color1 text-shadow1">
                    {{ taskReportInfo.completedTotal }}
                  </div>
                  <div class="text color2">完成工单（个）</div>
                </div>
              </div>
              <div class="stats">
                <div class="item">
                  <div class="num color1 text-shadow1">
                    {{
                      taskReportInfo.progressTotal
                        ? taskReportInfo.progressTotal
                        : 0
                    }}
                  </div>
                  <div class="text color2">进行工单（个）</div>
                </div>
              </div>
              <div class="stats">
                <div class="item">
                  <div class="num color1 text-shadow1">
                    {{ taskReportInfo.cancelTotal }}
                  </div>
                  <div class="text color2">取消工单（个）</div>
                </div>
              </div>
            </div>
          </el-col>
          <!-- 销售统计 -->
          <el-col :span="11" class="gmv-box">
            <!-- 头部标题 -->
            <div class="header">
              <div class="title">
                销售统计
                <span class="sub-title">{{ firstDayMonth }} ~ {{ today }}</span>
              </div>
            </div>
            <!-- body -->
            <div class="body">
              <div class="stats">
                <div class="item">
                  <div class="num color3 text-shadow2">{{ orderCount }}</div>
                  <div class="text color4">订单量（个）</div>
                </div>
              </div>
              <div class="stats">
                <div class="item">
                  <div class="num color3 text-shadow2">{{ gmv }}</div>
                  <div class="text color4">销售额（万元）</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 左侧身体区域 -->
        <div class="left-body">
          <!-- 头部标题 -->
          <div class="header">
            <!-- 标题 -->
            <div class="title">
              销售数据
              <span class="sub-title">{{ startDate }} ~ {{ today }}</span>
            </div>
            <!-- 周月年 -->
            <div class="week-month-year">
              <div
                class="item"
                :class="{ isChecked: dataType === 'week' }"
                @click="checkType('week')"
              >
                周
              </div>
              <div
                class="item"
                :class="{ isChecked: dataType === 'month' }"
                @click="checkType('month')"
              >
                月
              </div>
              <div
                class="item"
                :class="{ isChecked: dataType === 'year' }"
                @click="checkType('year')"
              >
                年
              </div>
            </div>
          </div>
          <!-- 身体charts -->
          <div class="charts">
            <!-- 左侧销量折线图 -->
            <div class="chart">
              <div
                v-show="amountCollectList.xAxis?.length !== 0"
                ref="amount"
                style="
                  height: 100%;
                  width: 100%;
                  -webkit-tap-highlight-color: transparent;
                  user-select: none;
                  position: relative;
                "
              />
              <div v-show="amountCollectList.xAxis?.length === 0" class="empty">
                <img
                  src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
                >
                <div class="tips">暂无数据</div>
              </div>
            </div>
            <!-- 右侧柱状图 -->
            <div class="chart">
              <div
                v-show="regionCollect.xAxis?.length !== 0"
                ref="region"
                style="
                  height: 100%;
                  width: 100%;
                  -webkit-tap-highlight-color: transparent;
                  user-select: none;
                  position: relative;
                "
              />
              <div v-show="regionCollect.xAxis?.length === 0" class="empty">
                <img
                  src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
                >
                <div class="tips">暂无数据</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 右侧商品热榜 -->
      <el-col :span="6" class="right-box">
        <!-- 头部标题 -->
        <div class="header">
          <div class="title">
            商品热榜
            <span class="sub-title">{{ firstDayMonth }} ~ {{ today }}</span>
          </div>
        </div>
        <!-- body -->
        <div class="body">
          <el-row
            v-for="(item, index) in skuTopList"
            :key="index"
            type="flex"
            align="middle"
            style="width: 100%; height: 20px; margin-bottom: 29px"
          >
            <el-col :span="5">
              <div class="top" :class="`top${index + 1}`">{{ index + 1 }}</div>
            </el-col>
            <el-col :span="13">
              <div :title="item.skuName" class="sku-name">
                {{ item.skuName }}
              </div>
            </el-col>
            <el-col :span="6" style="text-align: right">
              <div class="count">{{ item.count }}单</div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 下半部分 -->
    <el-row style="margin-left: -10px; margin-right: -10px; margin-top: 20px">
      <!-- 左边部分 -->
      <el-col :span="14" style="padding-left: 10px; padding-right: 10px">
        <div class="box partner-node-collect">
          <!-- 头部 -->
          <div class="header">
            <div class="title">合作商点位数Top5</div>
            <svg
              version="1.1"
              viewBox="0 0 1024 1024"
              class="more svg-icon svg-fill"
              style="width: 16px; height: 16px"
              fill="#5f84ff"
            >
              <defs />
              <path
                pid="0"
                d="M512 947.2C271.36 947.2 76.8 752.64 76.8 512S271.36 76.8 512 76.8 947.2 271.36 947.2 512 752.64 947.2 512 947.2M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0m256 435.2c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8m-512 0c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8m256 0c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8"
              />
            </svg>
          </div>
          <!-- 身体部分 -->
          <el-row class="body" style="margin-left: -10px; margin-right: -10px">
            <el-col :span="17" style="padding-left: 10px; padding-right: 10px">
              <div
                ref="node"
                class="chart"
                style="
                  height: 300px;
                  width: 100%;
                  -webkit-tap-highlight-color: transparent;
                  user-select: none;
                  position: relative;
                "
              />
            </el-col>
            <el-col :span="7" style="padding-left: 10px; padding-right: 10px">
              <div class="collect">
                <div class="count">{{ nodeCount }}</div>
                <div class="name">点位数</div>
                <div class="count count2">{{ nodeCollect.length }}</div>
                <div class="name">合作商数</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <!-- 右边部分 -->
      <el-col :span="10" style="padding-left: 10px; padding-right: 10px">
        <div class="box abnormal-equipment">
          <div class="header">
            <div class="title">异常设备监控</div>
            <svg
              version="1.1"
              viewBox="0 0 1024 1024"
              class="more svg-icon svg-fill"
              style="width: 16px; height: 16px"
              fill="#5f84ff"
            >
              <defs />
              <path
                pid="0"
                d="M512 947.2C271.36 947.2 76.8 752.64 76.8 512S271.36 76.8 512 76.8 947.2 271.36 947.2 512 752.64 947.2 512 947.2M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0m256 435.2c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8m-512 0c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8m256 0c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8"
              />
            </svg>
          </div>
          <!-- 暂无数据情况 -->
          <div class="empty">
            <img
              src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
              alt=""
            >
            <div class="tips">暂无数据</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from 'moment'
import { mapGetters } from 'vuex'
import { getNodeCollect, getNodeCount } from '@/api/vm'
import {
  getSkuTop,
  getAmountCollect,
  getOrderCount,
  getTaskReportInfo,
  getOrderAmount,
  getRegionCollect
} from '@/api/goods'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      skuTopList: [],
      nodeCollect: [],
      amountCollectList: {},
      regionCollect: {},
      orderCount: '',
      nodeCount: '',
      gmv: '',
      amountX: [],
      node: {},
      region: {},
      today: moment().format('YYYY-MM-DD'), // 今天日期
      firstDayMonth: moment().startOf('month').format('YYYY-MM-DD'), // 本月第一天日期
      firstDayWeek: moment().startOf('week').format('YYYY-MM-DD'), // 本周第一天日期
      firstDayYear: moment().startOf('year').format('YYYY-MM-DD'), // 今年第一天日期
      taskReportInfo: {
        total: '',
        completedTotal: '',
        progressTotal: '',
        cancelTotal: ''
      },
      dataType: 'week'
    }
  },
  computed: {
    ...mapGetters(['name']),
    startDate() {
      switch (this.dataType) {
        case 'week':
          return this.firstDayWeek
        case 'month':
          return this.firstDayMonth
        default:
          return this.firstDayYear
      }
    }
  },
  async created() {
    this.getSkuTop()
    this.getAmountCollect()
    this.getOrderCount()
    this.getTaskReportInfo()
    this.getOrderAmount()
    this.getNodeCollect()
    this.getNodeCount()
  },
  async mounted() {
    this.amount = echarts.init(this.$refs.amount)
    this.region = echarts.init(this.$refs.region)
    this.node = echarts.init(this.$refs.node)
    this.initCharts()
  },
  methods: {
    // 获取商品销售榜单前十
    async getSkuTop() {
      const res = await getSkuTop('10', this.firstDayMonth, this.today)
      this.skuTopList = res
    },
    // 获取订单总数
    async getOrderCount() {
      const res = await getOrderCount({
        start: moment().startOf('months').format('YYYY-MM-DD HH:mm:ss'),
        end: moment().format('YYYY-MM-DD HH:mm:ss')
      })
      console.log(res)
      this.orderCount = res
    },
    // 获取工单统计
    async getTaskReportInfo() {
      const res = await getTaskReportInfo(
        moment().startOf('months').format('YYYY-MM-DD HH:mm:ss'),
        moment().format('YYYY-MM-DD HH:mm:ss')
      )
      console.log(res)
      // console.log(res)
      const req = res.reduce((prev, next) => {
        if (!prev) prev = {}
        Object.keys(next).forEach((key) => {
          if (typeof next[key] === 'number') {
            prev[key] = (prev[key] ? prev[key] : 0) + next[key]
          }
        })
        return prev
      })
      // console.log(req)
      this.taskReportInfo = req
    },
    // 获取一定时间范围之内的收入
    async getOrderAmount() {
      const res = await getOrderAmount({
        start: moment().startOf('months').format('YYYY-MM-DD HH:mm:ss'),
        end: moment().format('YYYY-MM-DD HH:mm:ss')
      })
      console.log(res)
      this.gmv = (res / 1000000).toFixed(2)
    },
    // 获取地区汇总销售额数据
    // async getRegionCollect() {
    //   const res = await getRegionCollect(
    //     this.firstDayWeek,
    //     this.today
    //   )
    //   console.log(res)
    // },
    // 获取获取点位总数
    async getNodeCount() {
      const res = await getNodeCount()
      console.log(res)
      this.nodeCount = res
    },
    // 获取合作商点位汇总统计
    async getNodeCollect() {
      const res = await getNodeCollect()
      console.log(res)
      this.nodeCollect = res
    },
    // 切换周月年
    checkType(type) {
      this.dataType = type
      this.initCharts()
    },
    // 根据周月年获取接口数据
    async getAmountCollect() {
      switch (this.dataType) {
        case 'week':
          this.amountCollectList = await getAmountCollect(
            1,
            this.firstDayWeek,
            this.today
          )
          console.log(this.amountCollectList)
          this.regionCollect = await getRegionCollect(
            this.firstDayWeek,
            this.today
          )
          console.log(this.regionCollect)
          // 将英文星期转成中文星期
          moment.locale('zh-cn')
          this.amountX = this.amountCollectList.xAxis.map((item) =>
            moment(item).format('dddd')
          )
          console.log(this.amountX)
          break
        case 'month':
          this.amountCollectList = await getAmountCollect(
            1,
            this.firstDayMonth,
            this.today
          )
          this.regionCollect = await getRegionCollect(
            this.firstDayMonth,
            this.today
          )
          this.amountX = this.amountCollectList.xAxis.map((item) =>
            moment(item).format('M月D日')
          )
          console.log(this.amountX)
          break
        default:
          this.amountCollectList = await getAmountCollect(
            2,
            this.firstDayYear,
            this.today
          )
          this.regionCollect = await getRegionCollect(
            this.firstDayYear,
            this.today
          )
          this.amountX = this.amountCollectList.xAxis.map((item) =>
            moment(item).format('Y年M月')
          )
          console.log(this.amountX)
          break
      }
    },
    // 渲染echarts
    async initCharts() {
      await this.getAmountCollect()
      this.amount.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '销售额：{c}<br>{b}'
        },
        // 标题部分的设置
        title: {
          text: '销售额趋势图',
          left: 'center',
          textStyle: {
            fontWeight: 'bold',
            fontSize: '14px'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.amountX
        },
        yAxis: {
          type: 'value',
          name: '单位:元'
        },
        series: [
          {
            data: this.amountCollectList.series.map((item) => item / 100),
            type: 'line',
            smooth: true,
            symbolSize: 5,
            color: '#ff5757',
            lineStyle: {
              width: 3,
              color: '#ff5757'
            },
            areaStyle: {
              // 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#ff5757' // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: '#ffffff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      })
      // 右侧柱状图
      this.region.setOption({
        color: '#9fc1ff',
        tooltip: {
          trigger: 'item',
          formatter: '销售额：{c}<br>{b}'
        },
        title: {
          text: '销售额分布',
          left: 'center',
          textStyle: {
            fontWeight: 'bold',
            fontSize: '14px'
          }
        },
        xAxis: {
          type: 'category',
          data: this.regionCollect.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: this.regionCollect.series.map((item) => item / 100),
            type: 'bar',
            itemStyle: {
              borderRadius: [5, 5, 0, 0] // 设置柱形上方两个角为圆角
            },
            barWidth: 20
          }
        ]
      })
      // 渲染合作点位
      this.node.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br> 总占比：{d}%'
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [30, 100],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              show: true,
              formatter: '{b} \n {d}%',
              textStyle: {
                fontWeight: 'bold'
              }
            },
            data: this.nodeCollect
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    // margin: 30px 20px;
    display: flex;
    flex-direction: column;
  }
}
.top-erea {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.left-erae {
  margin-right: 20px;
}
.left-top-erea {
  display: flex;
  // width: 980.25px;
  height: 166px;
}

.header {
  display: flex;
  .title {
    align-items: center;
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    .sub-title {
      margin-left: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #999;
    }
  }
}

.body {
  display: flex;
  flex: 1;
  .stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    .item {
      display: inline-flex;
      flex-direction: column;
      .num {
        margin-top: 20px;
        font-weight: 600;
        line-height: 50px;
        height: 50px;
        font-size: 36px;
      }
      .text {
        font-size: 12px;
      }
    }
  }
}
.work-order {
  // width: 511px;
  background-image: url(""),
    url("https://likede2-admin.itheima.net/img/task.66b715b7.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
  background-color: #e9f3ff;
  padding: 20px;
  border-radius: 20px;
}
.gmv-box {
  // width: 430px;
  background: #fbefe8
    url("https://likede2-admin.itheima.net/img/sale.606b0d8c.png") no-repeat
    calc(100% - 12px) 100%;
  padding: 20px;
  border-radius: 20px;
  margin-left: 20px;
}

.color1 {
  color: #072074;
}
.color2 {
  color: #91a7dc;
}
.text-shadow1 {
  text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
}
.color3 {
  color: #ff5757;
}
.color4 {
  color: #de9690;
}
.text-shadow2 {
  text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5);
}

.left-body {
  // width: 960.25px;
  height: 352px;
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
  border-radius: 20px;
  .week-month-year {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 129px;
    height: 34px;
    background: rgba(233, 243, 255, 0.37);
    border-radius: 10px;
    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 37px;
      height: 25px;
      font-size: 14px;
      cursor: pointer;
    }
    .isChecked {
      background: #fff;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
      border-radius: 7px;
      font-weight: 600;
      color: #333;
    }
  }
}
.charts {
  display: flex;
  flex: 1;
  height: 100%;
  .chart {
    position: relative;
    display: inline-block;
    width: 50%;
    height: 100%;
  }
}

.right-box {
  // width: 25%;
  height: 538px;
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
  .body {
    flex: 1;
    margin-top: 20px;
    flex-direction: column;
    justify-content: space-between;
    .sku-name {
      height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
      line-height: 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .top {
      display: inline-block;
      margin-left: 10px;
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      line-height: 14px;
    }
    .count {
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #737589;
      line-height: 20px;
      text-align: right;
    }
    .top {
      display: inline-block;
      width: 16px;
      height: 20px;
      margin-left: 10px;
      background: url("");
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      color: #e9b499;
      line-height: 14px;
    }
    .top1 {
      width: 21px;
      height: 20px;
      background: url("");
      color: #8e5900;
    }
    .top2 {
      width: 21px;
      height: 20px;
      background: url("");
      color: #494949;
    }
    .top3 {
      width: 21px;
      height: 20px;
      background: url("");
      color: #cf6d3d;
    }
  }
}

.box {
  padding: 20px;
}
.partner-node-collect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(40vh - 48px);
  min-height: 353px;
  background: #fff;
  border-radius: 20px;
  .body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    .chart {
      padding-top: 16px;
    }
    .collect {
      width: 154px;
      height: 230px;
      padding-top: 47px;
      padding-left: 38px;
      background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
        linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
        linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
        linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
      background-size: 50% 50%;
      background-repeat: no-repeat;
      .count {
        height: 33px;
        font-size: 24px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #072074;
        line-height: 33px;
      }
      .count2 {
        margin-top: 20px;
      }
      .name {
        height: 17px;
        margin-top: 6px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000412;
        line-height: 17px;
      }
    }
  }
}
.empty {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  .tips {
    margin-top: 25px;
    color: #20232a;
    font-size: 14px;
  }
}
.abnormal-equipment {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(40vh - 48px);
  min-height: 353px;
  background: #fff;
  border-radius: 20px;
}
.more {
  color: #5f84ff;
  cursor: pointer;
}
</style>
